<template>
    <div class="finishedGoods">
        <van-nav-bar title="库存商品" left-arrow @click-left="handleLeft">
            <template #right>
                <van-image :src="duoxuan" class="duoxuan" @click="multipleChoice" />
            </template>
        </van-nav-bar>
        <div class="product_list_serch-text">
            <van-search class="product_list_serch1" v-model="queryParams.content" shape="round" background="#F6FAFF"
                placeholder="商品名称/商品编号/库存编码" @focus="showTop = false" />
            <div class="product_list_serch2">
                <div>
                    <van-button class="product_list-btn" round @click="onSearch">搜索</van-button>
                </div>
                <div class="product_list-btn-screen" @click="handleListFlag">
                    <div class="product_list-btn-screen-image"></div>
                    <div class="product_list-btn-screen-text">筛选</div>
                </div>
            </div>
        </div>
        <div class="mongolian_layer" v-show="showTop" @click="">
            <div class="mongolian_layer_options">
                <div class="title titles">价格</div>
                <div class="prices">
                    <div>￥{{ rangPrice[0] }}</div>
                    <div>￥{{ rangPrice[1] == 300 ? rangPrice[1] + '以上' : rangPrice[1] }}</div>
                </div>
                <van-slider v-model="rangPrice" range :step="10" :min="0" :max="300" @change="sliderChange">
                    <template #left-button>
                        <div class="custom-button"></div>
                    </template>
                    <template #right-button>
                        <div class="custom-button"></div>
                    </template>
                </van-slider>
                <div class="price_pre">
                    <div v-for="(item, index) in priceList" :key="index" class="price_pre_div">
                        <div @click="priceClick(index, item)"
                            :class="priceIndex !== index ? 'price_div' : 'price_div_avtive'">
                            {{ item.name }}
                        </div>
                    </div>
                </div>
                <div class="title">部门类型</div>
                <div class="shelf_type anthor_type">
                    <div @click="recruiterTypeClick(index, item.deptId)" v-for="(item, index) in recruiterTypeList"
                        :key="index" :class="srecruiterTypeIndex !== index ? 'shelf_div' : 'shelf_div_avtive'">
                        {{ item.deptName }}
                    </div>
                </div>
                <div class="title">部门名称</div>
                <div class="shelf_type anthor_type">
                    <div @click="shelfClick(index, item.deptId)" v-for="(item, index) in shelfList" :key="index"
                        :class="shelfIndex !== index ? 'shelf_div' : 'shelf_div_avtive'">
                        {{ item.deptName }}
                    </div>
                </div>
                <div class="title">人员名称</div>
                <div class="shelf_type anthor_type anthor_types">
                    <div v-for="(item, index) in recruiterList" :key="index" class="anthor_type_div">
                        <div @click="recruiterClick(index, item.userId)"
                            :class="recruiterIndex !== index ? 'shelf_div' : 'shelf_div_avtive'">
                            {{ item.nickName }}
                        </div>
                    </div>
                </div>
                <div class="title">上架时间</div>
                <div class="date_shelf">
                    <div v-for="(item, index) in dataList" :key="index" class="date_shelf_div" @click="datePicker">
                        <van-image :src="complement" class="menu_cions" />
                        <div class="title">{{ computPlace(item, index) }}</div>
                    </div>
                    <div class="div">至</div>
                </div>
                <van-calendar v-model:show="pickerShow" type="range" @confirm="onConfirm" :allow-same-day="true"
                    :min-date="minDate" :max-date="maxDate" ref="calendarRef" />

                <div class="buttons">
                    <div class="reset" @click="reset">重置</div>
                    <div class="submit" @click="submit">完成</div>
                </div>
            </div>
            <div class="mongolian_layer_layer"></div>

        </div>
        <div class="screen">
            <div class="screen_div" @click="screenClick()">
                <div class="screen_child">{{ queryParams.categoryIdList.length ? '多品类' : '商品类目' }}</div>
                <van-image :src="heisexiasanjiao" class="screen_icons" />
            </div>
        </div>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
                <template v-slot:finished>
                    <div class="nothing_div" v-if="list.length == 0 && !refreshing">
                        <van-image :src="nothingData"></van-image>
                        <div class="nothing_font">暂无数据</div>
                    </div>
                </template>
                <div class="product_list_van_list">
                    <div class="conent_pre" v-for="(item, index) in list" :key="index"
                        :style="{ 'background-color': item.checked ? '#E2F3FF' : '#fff' }">
                        <div class="conent_pre_header">
                            <van-checkbox v-show="multipleChoices" v-model="item.checked"
                                @change="onCheckboxChange(item, $event)" :disabled="computedStyle(item)" />
                            <div class="conent_pre_img">
                                <van-image :src="item.productImage" v-if="item.productImage"
                                    @click="enlargeImage(item.productImage)"></van-image>
                                <van-image :src="errImg" v-else></van-image>
                                <div class="liveStreamingMechanisms" v-if="item.mechanismList[1]?.cooperationMode">
                                    多机制</div>
                            </div>
                            <div class="conent_pre_des"
                                :style="{ width: multipleChoices ? 'calc(100% - 33vw)' : 'calc(100% - 24vw)' }">
                                <div class="contnt_title">
                                    <div class="contnt_styleName">
                                        {{ item.styleName }}
                                    </div>
                                    <div class="contnt_status">
                                        已上架
                                    </div>
                                </div>
                                <div class="contnt_mechanism">
                                    {{ item.sellingPoints }}
                                </div>
                                <div class="contnt_bottom">
                                    <div class="price">￥ {{ item.mechanismList[0]?.price ||
                                        item.mechanismList[0]?.costPrice }}</div>
                                    <div class="commission" v-if="item.mechanismList[0]?.commission">佣 {{
                                        (item.mechanismList[0]?.commission || 0) + "%" }}
                                    </div>
                                    <div class="coreName">{{ item.coreName }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="product_detail_title--content">
                            <div class="product_detail_title-content-info">
                                <div class="product_detail_title-content-info-name">机制：</div>
                                <div class="product_detail_title-content-info-content">
                                    {{ item.mechanismList[0]?.liveStreamingMechanism }}
                                </div>
                            </div>
                            <div class="product_detail_title-content-info">
                                <div class="product_detail_title-content-info-name">规格/材质</div>
                                <div class="product_detail_title-content-info-content">
                                    {{ item.specs }}
                                </div>
                            </div>
                            <div class="product_detail_title-content-info">
                                <div class="product_detail_title-content-info-name">当前库存：</div>
                                <div class="product_detail_title-content-info-content colors">
                                    {{ item.stockInfo?.stockAvailable }}件
                                </div>
                            </div>
                            <div class="buttons_div">
                                <div class="huojia">{{ item.stockInfo?.locationName }}</div>
                                <van-button type="primary" class="buttons_items" @click="associationClick(item)"
                                    :disabled="computedStyle(item)">选中</van-button>
                            </div>
                        </div>

                    </div>
                </div>
            </van-list>
        </van-pull-refresh>

        <div class="button" v-if="multipleChoices">
            <div class="cancel" @click="cancels">取消已选</div>
            <div class="outbound" @click="outbound" v-throttle:click>全部盘点 ({{ selectedItem.length }})</div>
        </div>
    </div>
    <category :isShow="isShow" @leftClick="leftClick" @onSubmit="onSubmit" :multiple="true"
        v-model:value="queryParams.categoryIdList" />
</template>
<script setup lang="ts">
import category from '@/components/category/index.vue'
import { ref } from "vue";
import { showConfirmDialog, showFailToast, showImagePreview, type CalendarInstance } from 'vant';
import { useRouter } from "vue-router";
import { getUserList, queryProduct, queryList } from '@/api/productHome/index'
import { getEnvValue } from "@/utils/index";
const router = useRouter();
const duoxuan = new URL("@/assets/productHome/icon_duoxuan.png", import.meta.url).href;
const errImg = new URL("@/assets/home/error.png", import.meta.url).href;
const complement = new URL("@/assets/productHome/icon_riqi.png", import.meta.url).href;
const nothingData = new URL("@/assets/porduct/icon_zanwushuju.png", import.meta.url).href
const heisexiasanjiao = new URL("@/assets/productHome/icon_heisexiasanjiao.png", import.meta.url).href;


const multipleChoices = ref(false)
// 多选
const multipleChoice = () => {
    multipleChoices.value = !multipleChoices.value
}
const queryParams = ref<any>({
    pageNum: 1,
    pageSize: 10,
    // 搜索值
    content: '',
    shelvesStatus: 2,
    categoryIdList: []
});
// 筛选
const showTop = ref(false)
// 滑块价格
const rangPrice = ref<any>([0, 300])
// 价格index
const priceIndex = ref()
// 价格list
const priceList = ref([
    { name: '¥10以下', value: [0, 10] },
    { name: '¥10-50', value: [10, 50] },
    { name: '¥50-100', value: [50, 100] },
    { name: '¥100-150', value: [100, 150] },
    { name: '¥150-200', value: [150, 200] },
    { name: '¥200-250', value: [200, 250] },
    { name: '¥250-300', value: [250, 300] },
    { name: '¥300以上', value: [300, 99999] }
])
// 部门类型
const recruiterTypeList = ref<Array<any>>([])
// 部门类型 index
const srecruiterTypeIndex = ref<any>()
// 部门名称 index
const shelfIndex = ref<any>()
// 部门名称
const shelfList = ref<any>([])
// 人员名称
const recruiterList = ref<any>([])
// 人员名称 index
const recruiterIndex = ref()
const dataList = ref([
    '起始时间', '结束时间'
])
// 日期展示
const pickerShow = ref(false)
// 开始时间
const startTime = ref()
// 结束时间
const endTime = ref()
// 自定义日期范围
const minDate = new Date('2010/01/01')
const maxDate = new Date('2050/12/31')
// 日期ref
const calendarRef = ref<CalendarInstance>();

// 列表
const refreshing = ref(false);
const loading = ref(false);
const finished = ref(false);
const list = ref<any[]>([]);
// 限制连续刷新数据重复问题
const refreFlag = ref(true)

// 选中数据
const selectedItem = ref<any>([])

/** 盘点按钮的样式 分选中过和没选中过 */
const computedStyle = (item: any) => {
    // 无库存
    if (item.stockInfo?.stockAvailable > 0) {
        const relatedDocumentsId = JSON.parse(localStorage.getItem('stocktakingIdList') as any)
        if (relatedDocumentsId && relatedDocumentsId.length > 0) {
            if (relatedDocumentsId.indexOf(item.id) !== -1) {
                return true
            } else {
                return false
            }
        } else {
            return false
        }
    } else {
        return true
    }
}
/** 步进器拖动 */
const sliderChange = () => {
    priceIndex.value = undefined
}
/** 商品类目 */
const screenClick = () => {
    isShow.value = true
}
const isShow = ref<any>(false)
// 类目导航返回
const leftClick = () => {
    isShow.value = false
}
// 搜索查询
const onSubmit = () => {
    isShow.value = false
    onRefresh()
}
/** 价格点击 */
const priceClick = (index: number, item: any) => {
    if (priceIndex.value == index) {
        priceIndex.value = undefined
        rangPrice.value = [0, 300]
    } else {
        priceIndex.value = index
        if (index == 7) {
            rangPrice.value = [300, 300]
        } else {
            rangPrice.value = [...item.value]
        }
    }
}
/** 部门类型点击 */
const recruiterTypeClick = async (index: number, deptId: string) => {
    if (srecruiterTypeIndex.value == index) {
        srecruiterTypeIndex.value = undefined
        shelfList.value = []
        shelfIndex.value = undefined
        recruiterList.value = []
        recruiterIndex.value = undefined
        queryParams.value.recruiterDeptId = undefined
        queryParams.value.recruiterUserId = undefined
    } else {
        srecruiterTypeIndex.value = index
        const res = await queryList({ parentId: deptId })
        shelfList.value = res.data
        recruiterList.value = []
        shelfIndex.value = undefined
        recruiterIndex.value = undefined
        queryParams.value.recruiterDeptId = deptId
        queryParams.value.recruiterUserId = undefined
    }
}
/** 部门名称点击 */
const shelfClick = async (index: number, deptId: string) => {
    if (shelfIndex.value == index) {
        shelfIndex.value = undefined
        recruiterList.value = []
        recruiterIndex.value = undefined
        queryParams.value.recruiterDeptId = undefined
        queryParams.value.recruiterUserId = undefined
    } else {
        shelfIndex.value = index
        const res = await getUserList({ deptId: deptId })
        recruiterList.value = res.rows
        recruiterIndex.value = undefined
        queryParams.value.recruiterDeptId = deptId
        queryParams.value.recruiterUserId = undefined
    }
}
/** 人员点击 */
const recruiterClick = (index: number, userId: string) => {
    if (recruiterIndex.value == index) {
        recruiterIndex.value = undefined
        queryParams.value.recruiterUserId = undefined
    } else {
        recruiterIndex.value = index
        queryParams.value.recruiterUserId = userId
    }
}
/** 获取部门类型 */
const getType = async () => {
    loading.value = true
    const { data = [] } = await queryList({ parentId: '1861962988832542721' })
    recruiterTypeList.value = data
    loading.value = false
}
getType()
/** 上架时间点击事件 */
const datePicker = () => {
    pickerShow.value = true
}
const formatDate = (date) => `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
/** 日期选择 */
const onConfirm = (values) => {
    const [start, end] = values;
    pickerShow.value = false
    startTime.value = formatDate(start)
    endTime.value = formatDate(end)
}
/** 日期回显 */
const computPlace = (item: string, index: number) => {
    if (index == 0) {
        if (startTime.value) {
            return startTime.value
        } else {
            return item
        }
    } else if (index == 1) {
        if (endTime.value) {
            return endTime.value
        } else {
            return item
        }
    }
}
/** 重置 */
const reset = () => {
    rangPrice.value = [0, 300]
    srecruiterTypeIndex.value = undefined
    priceIndex.value = undefined
    shelfIndex.value = undefined
    recruiterIndex.value = undefined
    startTime.value = undefined
    endTime.value = undefined
    calendarRef.value?.reset();
    queryParams.value = {
        pageNum: 1,
        pageSize: 10,
        content: undefined,
        shelvesStatus: 2,
        categoryIdList: []
    }
    shelfList.value = []
    recruiterList.value = []
}
/** 完成 */
const submit = () => {
    // 价格筛选
    queryParams.value.startPrice = rangPrice.value[0]
    if (rangPrice.value[1] == rangPrice.value[0] && 300 == rangPrice.value[0]) {
        queryParams.value.endPrice = 99999
    } else if (rangPrice.value[0] == 0 && rangPrice.value[1] == 300) {
        queryParams.value.startPrice = undefined
        queryParams.value.endPrice = undefined
    } else {
        queryParams.value.endPrice = rangPrice.value[1]
    }

    // 日期
    queryParams.value.upStartTime = startTime.value
    queryParams.value.upEndTime = endTime.value

    showTop.value = false
    onRefresh();
}



/** 库存编码搜索 */
const onSearch = () => {
    showTop.value = false
    onRefresh()
}
/** 图片放大 */
const enlargeImage = (img: string) => {
    if (img) {
        showImagePreview({
            images: [img],
        });
    }
};
/** 筛选 */
const handleListFlag = () => {
    // 隐藏时删除留存状态
    if (showTop.value) {
        selectedItem.value = [];
        list.value.forEach(item => {
            item.checked = false
        })
    }
    showTop.value = !showTop.value
}

/** 回退 */
const handleLeft = () => {
    showConfirmDialog({
        message:
            '退出后将不保留未完成操作',
    })
        .then(() => {
            router.push({
                path: '/inventoryCommodity',
            })
        })
        .catch(() => {
            // on cancel
        });
}

/** 盘点 */
const associationClick = (item: any) => {
    selectedItem.value = [item]
    // 盘点商品id集合
    const selectedItems = selectedItem.value.map(item => item.id)
    if (JSON.parse(localStorage.getItem('stocktakingIdList') as any)) {
        // 库位码
        const indexs = JSON.parse(localStorage.getItem('shelvesCodeList') as any).indexOf(item.stockInfo.locationName)
        // 已存在当前商品库位码 库位码不存 单存储商品列表
        if (indexs != -1) {
            const stocktakingList = JSON.parse(localStorage.getItem('stocktakingList') as any)
            // 商品列表
            stocktakingList[indexs].push(item)
            localStorage.setItem('stocktakingList', JSON.stringify(stocktakingList))
            // 商品id
            const ids = stocktakingList.flat().map(item => item.id)
            localStorage.setItem('stocktakingIdList', JSON.stringify(ids))
        } else {
            // 不存在当前库位码
            const stocktakingList = JSON.parse(localStorage.getItem('stocktakingList') as any)
            // 商品列表
            stocktakingList.unshift(selectedItem.value)
            localStorage.setItem('stocktakingList', JSON.stringify(stocktakingList))
            // 商品id
            const ids = stocktakingList.flat().map(item => item.id)
            localStorage.setItem('stocktakingIdList', JSON.stringify(ids))
            // 库位码
            const shelvesCodeList = JSON.parse(localStorage.getItem('shelvesCodeList') as any)
            shelvesCodeList.unshift(item.stockInfo.locationName)
            localStorage.setItem('shelvesCodeList', JSON.stringify(shelvesCodeList))
        }
    } else {
        // 商品id
        localStorage.setItem('stocktakingIdList', JSON.stringify(selectedItems))
        // 商品列表
        localStorage.setItem('stocktakingList', JSON.stringify([selectedItem.value]))
        // 库位码
        localStorage.setItem('shelvesCodeList', JSON.stringify(item.stockInfo.locationName))
    }
    router.push({
        path: '/inventoryCommodity',
        query: {
            info: JSON.stringify(selectedItem.value),
        }
    })
}

/** 多选取消 */
const cancels = () => {
    list.value.forEach(item => {
        item.checked = false
    })
    selectedItem.value = [];
};
/** 盘点 */
const outbound = async () => {
    if (selectedItem.value.length == 0) {
        showFailToast('请勾选盘点商品');
    } else {
        save()
    }
};
/** 二次确认确定 */
const save = () => {
    // 盘点商品id集合
    if (JSON.parse(localStorage.getItem('stocktakingIdList') as any)) {
        selectedItem.value.forEach(element => {
            // 库位码
            const indexs = JSON.parse(localStorage.getItem('shelvesCodeList') as any).indexOf(element.stockInfo.locationName)
            // 已存在当前商品库位码 库位码不存 单存储商品列表
            if (indexs != -1) {
                const stocktakingList = JSON.parse(localStorage.getItem('stocktakingList') as any)
                // 商品列表
                stocktakingList[indexs].push(element)
                localStorage.setItem('stocktakingList', JSON.stringify(stocktakingList))
                // 商品id
                const ids = stocktakingList.flat().map(item => item.id)
                localStorage.setItem('stocktakingIdList', JSON.stringify(ids))
            } else {
                // 不存在当前库位码
                const stocktakingList = JSON.parse(localStorage.getItem('stocktakingList') as any)
                // 商品列表
                stocktakingList.unshift([element])
                localStorage.setItem('stocktakingList', JSON.stringify(stocktakingList))
                // 商品id
                const ids = stocktakingList.flat().map(item => item.id)
                localStorage.setItem('stocktakingIdList', JSON.stringify(ids))
                // 库位码
                const shelvesCodeList = JSON.parse(localStorage.getItem('shelvesCodeList') as any)
                shelvesCodeList.unshift(element.stockInfo.locationName)
                localStorage.setItem('shelvesCodeList', JSON.stringify(shelvesCodeList))
            }
        })
    } 
    router.push({
        path: '/inventoryCommodity',
        query: {
            info: JSON.stringify(selectedItem.value),
        }
    })
}
/** 选中事件 */
const onCheckboxChange = (item, checked) => {
    if (!checked) {
        const index = selectedItem.value.findIndex(
            (selected) => selected.id === item.id
        );
        if (index !== -1) {
            selectedItem.value.splice(index, 1);
        }
    } else {
        selectedItem.value.push(item);
    }
};
/** 查询商品列表 */
const getList = async () => {
    try {
        const res = await queryProduct(queryParams.value);
        if (res.code == 200) {
            for (let index = 0; index < res.data.rows.length; index++) {
                if (res.data.rows[index].productImage) {
                    const real_src = res.data.rows[index].productImage.split(",");
                    res.data.rows[index].productImage = getEnvValue("VITE_APP_PIC_URL") + real_src[0]
                }
                // 机制
                if (res.data.rows[index].mechanismList) {
                    res.data.rows[index].hmMechanismsList = res.data.rows[index].mechanismList
                }
                // 当前库存
                if (res.data.rows[index].stockInfo.stockAvailable) {
                    res.data.rows[index].stockAvailable = res.data.rows[index].stockInfo.stockAvailable
                }
                // 货架
                if (res.data.rows[index].stockInfo.locationName) {
                    res.data.rows[index].locationName = res.data.rows[index].stockInfo.locationName
                }
            }
            refreFlag.value = true
            // 空数据 停止加载
            if (res.data.rows.length == 0) {
                list.value = [];
                finished.value = true;
                return;
            }
            // 有数据 赋值列表 加载状态结束
            res.data.rows.forEach((item) => {
                finished.value = false;
                list.value.push(item);
            });
            loading.value = false;
            refreshing.value = false;
            // 如果list长度大于等于总数据条数，数据全部加载完成
            if (list.value.length >= res.data.total) {
                finished.value = true; //结束加载
            }
        } else {
            list.value = [];
            finished.value = true;
            loading.value = false;
            refreshing.value = false;
            return;
        }
    } catch (error) {
        list.value = [];
        finished.value = true;
        loading.value = false;
        refreshing.value = false;
        return;
    }
};
/** 加载更多 */
const onLoad = async () => {
    getList();
    queryParams.value.pageNum++;
};
/** 下拉 */
const onRefresh = () => {
    if (refreFlag.value) {
        refreFlag.value = false
        finished.value = false; // 清空列表数据
        refreshing.value = false;
        loading.value = true; // 加载状态
        queryParams.value.pageNum = 1; // 分页数赋值为1
        list.value = []; // 清空数组
        onLoad(); // 重新加载数据
    } else {
        finished.value = false;
        refreshing.value = false;
    }
};
</script>

<style lang="less" scoped>
.finishedGoods {
    width: 100%;
    height: calc(100vh - 44px);
    background: #F6FAFF;
    box-sizing: border-box;
    overflow: hidden;

    :deep(.van-icon-arrow-left) {
        color: #000 !important;
    }

    .duoxuan {
        width: 18px;
        height: 18px;
    }

    .product_list_serch-text {
        display: flex;
        align-items: center;
        width: 100%;
        background: #f6faff;
        height: 34px;
        margin-bottom: 10px;
        padding-top: 10px;
        position: relative;

        :deep(.van-search__field) {
            background-color: #fff;
            border-radius: 20px;
            padding-left: 10px;
        }

        .product_list_serch1 {
            display: flex;
            align-items: center;
            background: #f6faff;
            width: 85%;
            height: 34px;
            position: relative;

            :deep(.van-search__content) {
                height: 35px;
                padding-left: 0 !important;
            }

            :deep(.van-search__field) {
                height: 35px;
            }
        }

        .product_list_serch2 {
            display: flex;
            width: 50px;
            left: -10px;
            justify-content: center;
            align-items: center;

            .product_list-btn {
                width: 54px;
                height: 26px;
                font-size: 14px;
                color: #ffffff;
                border: none;
                background: #0094ff;
                white-space: nowrap;
                position: absolute;
                top: 14px;
                left: 66%;
            }

            .product_list-btn-screen {
                display: flex;
                // margin-left: 15px;
                //   width: 0px;
                // margin-right: 15px;
                display: flex;
                align-items: center;
                //   border: solid 1px black;
            }

            .product_list-btn-screen-image {
                width: 13px;
                height: 15px;
                background-image: url("@/assets/home/icon_shaixuan.png");
                background-size: 100% 100%;
                //   background-size: 100% 100%;
            }

            .product_list-btn-screen-text {
                display: flex;
                align-items: center;
                height: 18px;
                font-size: 14px;
                color: #1a1b1c;
                margin-left: 5px;
            }
        }
    }

    .mongolian_layer {
        width: 100%;
        height: calc(100vh - 144px);
        position: absolute;

        .mongolian_layer_layer {
            width: 100%;
            height: calc(100% - 540px);
            position: absolute;
            z-index: 6000;
            background: #000000;
            opacity: 0.73;
            margin-top: 540px;

        }

        .mongolian_layer_options {
            width: 100%;
            height: 540px;
            background: #FFFFFF;
            display: flex;
            justify-content: space-around;
            align-items: center;
            position: absolute;
            z-index: 6001;
            flex-wrap: wrap;
            padding: 15px;
            box-sizing: border-box;
            align-content: flex-start;
            overflow: auto;

            .prices {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                margin-bottom: 20px;
                margin-top: 10px;
                box-sizing: border-box;
            }

            .title {
                width: 100%;
            }

            .titles {}

            .custom-button {
                width: 24px;
                height: 24px;
                background-color: var(--van-primary-color);
                border-radius: 24px;
            }

            .price_title {
                position: absolute;
                top: -20px;
                left: -10px;
            }

            .price_titles {
                width: 100px;
                top: -20px;
                position: absolute;
            }

            .price_pre {
                width: 100%;
                height: 115px;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                flex-wrap: wrap;
                margin-top: 20px;
                align-content: space-between;
                margin-bottom: 20px;

                .price_pre_div {
                    width: calc(100% / 3) !important;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .price_div {
                    width: 108px;
                    height: 30px;
                    border-radius: 15px;
                    border: 1px solid #B8BECA;
                    font-weight: 400;
                    font-size: 14px;
                    color: #B8BECA;
                    text-align: center;
                    line-height: 30px;
                    box-sizing: border-box;
                }

                .price_div_avtive {
                    width: 108px;
                    height: 30px;
                    border-radius: 15px;
                    background: #0094FF;
                    font-weight: 400;
                    font-size: 14px;
                    color: #fff;
                    text-align: center;
                    line-height: 30px;
                }
            }

            .anthor_type {
                height: auto !important;
                flex-wrap: wrap;

                .anthor_type_div {
                    width: calc(100% / 3) !important;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .shelf_div {
                    margin-bottom: 10px;
                    width: 108px !important;
                }

                .shelf_div_avtive {
                    margin-bottom: 10px;
                    width: 108px !important;
                }


            }

            .anthor_types {
                justify-content: flex-start !important;
            }

            .shelf_type {
                width: 100%;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 20px;
                margin-bottom: 20px;

                .shelf_div {
                    width: 78px;
                    height: 30px;
                    border-radius: 15px;
                    border: 1px solid #B8BECA;
                    font-weight: 400;
                    font-size: 14px;
                    color: #B8BECA;
                    text-align: center;
                    line-height: 30px;
                    box-sizing: border-box;
                }

                .shelf_div_avtive {
                    width: 78px;
                    height: 30px;
                    border-radius: 15px;
                    background: #0094FF;
                    font-weight: 400;
                    font-size: 14px;
                    color: #fff;
                    text-align: center;
                    line-height: 30px;
                }
            }

            .date_shelf {
                width: 100%;
                height: 34px;
                display: flex;
                position: relative;
                justify-content: space-between;
                align-items: center;
                margin-top: 20px;
                margin-bottom: 20px;

                .date_shelf_div {
                    width: 159px;
                    height: 34px;
                    border-radius: 17px;
                    border: 1px solid #B8BECA;
                    position: relative;
                    text-align: center;
                    line-height: 34px;

                    .menu_cions {
                        position: absolute;
                        width: 14px;
                        height: 14px;
                        top: 10px;
                        left: 15px;
                    }

                    .title {
                        font-weight: 400;
                        font-size: 14px;
                        color: #B8BECA;
                    }
                }

                .div {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                }
            }

            .buttons {
                width: 100%;
                height: 44px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .reset {
                    width: 162px;
                    height: 44px;
                    border-radius: 23px;
                    border: 1px solid #0094FF;
                    text-align: center;
                    line-height: 44px;
                    font-weight: 400;
                    font-size: 14px;
                    color: #0094FF;
                }

                .submit {
                    width: 162px;
                    height: 44px;
                    border-radius: 23px;
                    background: #0094FF;
                    text-align: center;
                    line-height: 44px;
                    font-weight: 400;
                    font-size: 14px;
                    color: #fff;
                }
            }
        }
    }

    .screen {
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        height: 44px;
        width: 100%;
        padding: 27px;
        line-height: 44px;
        background-color: #fff;

        .screen_div {
            display: flex;
            align-items: center;
            justify-content: center;

            .screen_child {
                font-weight: 400;
                font-size: 14px;
                color: #1A1B1C;
                max-width: 60px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            .screen_icons {
                width: 10px;
                height: 6px;
                margin-left: 5px;
            }

            .screen_icon {
                display: flex;
                flex-wrap: wrap;
                width: 10px;
                height: 16px;
                margin-left: 5px;

                .screen_icons {
                    width: 10px;
                    height: 6px;
                }
            }
        }
    }

    :deep(.van-pull-refresh) {
        height: calc(100vh - 198px);
        overflow: scroll;
    }

    .nothing_div {
        width: 100%;
        margin: auto;
        text-align: center;
        margin-top: 20vh;
        font-weight: 400;
        font-size: 12px;
        color: #B8BECA;
        line-height: 12px;
        flex-wrap: wrap;

        .van-image {
            width: 160px;
            height: 160px;
        }
    }

    .conent_pre {
        width: 100%;
        padding: 15px;
        box-sizing: border-box;
        background-color: #fff;
        margin-top: 10px;

        .conent_pre_header {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .conent_pre_img {
                width: 90px;
                height: 90px;
                position: relative;

                .liveStreamingMechanisms {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 50px;
                    height: 20px;
                    background: #0094FF;
                    border-radius: 2px 0px 2px 0px;
                    font-weight: 400;
                    font-size: 12px;
                    color: #FFFFFF;
                    text-align: center;
                    line-height: 20px;
                }

                .van-image {
                    width: 90px;
                    height: 90px;

                    :deep(.van-image__img) {
                        border-radius: 5px !important;
                    }
                }
            }

            .conent_pre_des {
                width: calc(100% - 90px);
                height: 90px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: wrap;
                padding-left: 10px;
                align-content: space-around;

                .contnt_title {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .contnt_styleName {
                        font-weight: 400;
                        font-size: 14px;
                        color: #1A1B1C;
                        width: 150px;
                        height: 20px;
                        white-space: nowrap;
                        /* 确保文本在一行内显示 */
                        overflow: hidden;
                        /* 隐藏溢出的内容 */
                        text-overflow: ellipsis;
                    }

                    .contnt_status {
                        width: 67px;
                        height: 26px;
                        background: #E7FDEE;
                        border-radius: 2px;
                        font-weight: 400;
                        font-size: 14px;
                        color: #19D11B;
                        text-align: center;
                        line-height: 26px;
                    }

                }

                .contnt_mechanism {
                    width: 100%;
                    font-weight: 400;
                    font-size: 12px;
                    color: #B8BECA;
                    white-space: nowrap;
                    /* 确保文本在一行内显示 */
                    overflow: hidden;
                    /* 隐藏溢出的内容 */
                    text-overflow: ellipsis;
                }

                .contnt_bottom {
                    width: 100%;
                    height: 20px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .price {
                        font-weight: 500;
                        font-size: 14px;
                        color: #FC2540;
                    }

                    .commission {
                        font-weight: 500;
                        font-size: 14px;
                        color: #FC2540;
                    }

                    .coreName {
                        font-weight: 400;
                        font-size: 12px;
                        color: #0094FF;
                    }
                }
            }
        }

        .product_detail_title-content-info {
            margin-top: 20px;
            display: flex;

            .product_detail_title-content-info-name {
                font-weight: 400;
                font-size: 14px;
                color: #1a1b1c;
                line-height: 14px;
                width: 100px;
            }

            .colors {
                color: #0094FF !important;
            }

            .product_detail_title-content-info-content {
                flex: 1;
                min-width: 0;
                font-weight: 400;
                font-size: 14px;
                color: #b8beca;
                line-height: 14px;
                margin-left: auto;
                display: flex;
                justify-content: flex-end;
                word-break: break-all;
            }
        }

        .buttons_div {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 20px;

            .huojia {
                color: #19D11B;
            }

            .buttons_items {
                width: 84px;
                height: 24px;
                background: #0094FF;
                border-radius: 2px;
                text-align: center;
                line-height: 24px;
                font-weight: 400;
                font-size: 14px;
                color: #FFFFFF;
            }
        }

    }

    :deep(.van-slider) {
        width: 90%;
    }

    :deep(.van-slider__button) {
        background-color: #0094FF !important;
    }

    :deep(.van-dialog__content) {
        box-sizing: border-box;
        padding: 20px;
    }

    .dialog_title {
        text-align: center;
        margin: 20px;
    }

    .dialog_buttons {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .cancel {
            width: 135px;
            height: 44px;
            border-radius: 23px;
            border: 1px solid #1A1B1C;
            text-align: center;
            line-height: 44px;
        }

        .save {
            width: 135px;
            height: 44px;
            background: #0094FF;
            border-radius: 23px;
            text-align: center;
            line-height: 44px;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
        }
    }

    .button {
        width: 100%;
        position: fixed;
        bottom: 0;
        height: 50px;
        z-index: 100;
        display: flex;
        line-height: 40px;
        background-color: #fff;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .cancel {
            background: #FFFFFF;
            border: 1px solid #0094FF;
            color: #0094FF;
            border-radius: 23px;
        }

        .outbound {
            color: #fff;
            background: #0094FF;
            border-radius: 23px;
        }

        div {
            width: 150px;
            height: 40px;
            text-align: center;
        }
    }
}
</style>